<!-- 专家主页  -->
<template>
  <publicPage>
    <view class="expHomePage">
      <InfoCard :item="infoObj" :showTag="false" />
      <view class="borderT mx-15"></view>

      <BtnList :item="infoObj" :showImConsult="!getParams.hideImConsult" />

      <Specialty :item="infoObj" />
      <view class="borderTop30" v-if="infoObj.expertAlbum">
        <view
          class="linh-50 px-15 fz-16 fw-7"
          style="border-bottom: solid 1px #f5f5f5"
          >相册</view
        >
        <view class="disFlxCC px-15 pb-15">
          <image
            v-for="(item, index) in infoObj.expertAlbum"
            :key="index"
            :src="item.img"
            style="width: 100%; height: auto"
            class="mt-15"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>

    <view class="safe-height"></view>
  </publicPage>
</template>

<script>
import orderApi from "@/api/order.js";
import InfoCard from "@/components/infoCard.vue";
import Specialty from "../components/specialty.vue";
import BtnList from "@/components/btnList.vue";

export default {
  components: {
    InfoCard,
    Specialty,
    BtnList,
  },
  computed: {
    // 用户信息
    userInfo() {
      return this.$store.state.userInfo;
    },
    // 是否为ios
    // isIOS() {
    //   return this.$store.state.deviceInfo.system.indexOf("iOS") !== -1;
    // },
  },
  data() {
    return {
      getParams: {},
      infoObj: {}
    };
  },
  onLoad(options) {
    this.getParams = options;
    this.getList();
  },
  methods: {
    // 获取专家详情
    async getList() {
      const { data } = await orderApi.getExpertInfo(this.getParams);
      this.infoObj = data;
    }
  },
};
</script>
<style lang='scss' scoped>
.expHomePage {
  background-color: #ffffff;
  .btn1 {
    border-radius: 26rpx;
    border: solid 1px #0d8bff;
    background-color: #ffffff;
    color: #0d8bff;
    width: 184rpx;
    justify-content: center;
    padding: 6rpx 0;
  }
  .btn1.btn2 {
    border: solid 1px #afa24b;
    background-color: #fffdf2;
    color: #afa24b;
  }
  .btn1.btn3 {
    border: solid 1px #00a471;
    background-color: #fffdf2;
    color: #00a471;
  }
  .filter {
    filter: grayscale(100%) opacity(0.8);
  }
}
</style>